<template>
  <div style="position: relative">
    <ul>
      <li v-for="menu in menus" @click="handleScroll(menu.key)">{{ menu.title }}</li>
    </ul>
    <el-button :icon="CopyIcon" @click="handleCopy" />
    <template v-for="menu in menus">
      <h4 :id="menu.key">{{ menu.title }}</h4>
      <component :is="menu.componentKey">
        <template #default="scope">
          <!-- 页面代码 源码 -->
          <dropWrap key="oreo">
            <pre><code class="language-js">{{ scope.html }}</code></pre>
          </dropWrap>
          <!-- 页面代码 源码 -->
        </template>
      </component>
    </template>
  </div>
</template>

<script setup lang="tsx">
import { nextTick, reactive } from "vue";

import Container from "./components/Container.vue";
import SerachTable from "./components/SerachTable.vue";
import CopyLayout from "./components/CopyLayout.vue";

import MerakIcon from "../../../../../components/MerakIcon/index.vue";

import { ElButton, ElMessage } from "element-plus";

import dropWrap from "../../dropWrap.vue";

import Prism from "prismjs";

const CopyIcon = () => (
  <MerakIcon>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
    </svg>
  </MerakIcon>
);

const menus = reactive([
  { key: "copyLayout", title: "提供可 copy 的模板", componentKey: CopyLayout },
  { key: "container", title: "拥有侧边栏的布局", componentKey: Container },
  { key: "searchTable", title: "拥有搜索的表格布局", componentKey: SerachTable }
]);

const handleScroll = (key: string) => {
  const node = document.getElementById(key);
  if (!node) return;
  node.scrollIntoView({ behavior: "smooth" });
};

const handleCopy = () => {
  const text = `
<template>
  <div class="merak-container-has-aside" curPageName="...">
    <!-- 包装层 可在末尾追加弹窗、抽屉等组件 curPageName 用于页面检索 -->
    <div class="merak-aside">
      <!-- 侧边栏 可向下复制 可删除 -->
    </div>
    <div class="merak-card merak-container-has-search">
      <!-- 主容器 可随意放置高级搜索等组件 也可不放置 -->
      <div class="merak-table-wrapper">
        <!-- table 组件区域 仅允许放置 table -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="...">
// name 用于控制本页面缓存
<\/script>

<style scoped lang="scss"></style>
  `;
  navigator.clipboard
    .writeText(text)
    .then(() => {
      ElMessage.success("复制成功");
    })
    .catch(() => {
      throw "当前浏览器不支持 copy api";
    });
};

nextTick(() => {
  Prism.highlightAll();
});
</script>

<style scoped lang="scss">
.el-button {
  position: absolute;
  top: -3px;
  left: 150px;
}
ul {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 5px;
  min-width: 120px;
  font-size: 12px;
  background-color: var(--el-bg-color);
  border-radius: var(--el-border-radius-base);
  box-shadow: var(--el-box-shadow);
  :not(:first-child) {
    margin-top: 5px;
  }
  li {
    padding: 2px 4px;
    list-style: none;
    transition: background-color 0.5s;
    cursor: pointer;
    &:hover {
      background-color: var(--el-menu-item-hover-fill);
    }
  }
}
</style>
